{% extends 'base.html' %}
{% load static %}

{% block title %}我的订单{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link {% if status == 'all' %}active{% endif %}" 
                   href="{% url 'my_orders' %}">全部订单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if status == 'pending' %}active{% endif %}" 
                   href="{% url 'my_orders' %}?status=pending">待处理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if status == 'delivering' %}active{% endif %}" 
                   href="{% url 'my_orders' %}?status=delivering">配送中</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if status == 'completed' %}active{% endif %}" 
                   href="{% url 'my_orders' %}?status=completed">已完成</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        {% for order in orders %}
        <div class="card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <h5 class="card-title">订单号：{{ order.order_number }}</h5>
                        <p class="card-text">
                            <strong>商家：</strong>{{ order.merchant.name }}<br>
                            <strong>下单时间：</strong>{{ order.created_at|date:"Y-m-d H:i" }}<br>
                            <strong>配送地址：</strong>{{ order.delivery_address }}<br>
                            <strong>订单状态：</strong>{{ order.get_status_display }}
                        </p>
                    </div>
                    <div class="col-md-4 text-end">
                        <h6 class="card-subtitle mb-2 text-muted">总价：¥{{ order.total_amount }}</h6>
                        <a href="{% url 'order_detail' order.id %}" class="btn btn-primary">查看详情</a>
                        {% if order.status == 'pending' %}
                        <a href="{% url 'cancel_order' order.id %}" class="btn btn-danger">取消订单</a>
                        {% endif %}
                        {% if order.status == 'completed' and not order.is_rated %}
                        <a href="{% url 'rate_order' order.id %}" class="btn btn-success">评价订单</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="text-center py-5">
            <i class="fas fa-shopping-bag fa-3x text-muted mb-3"></i>
            <h5>暂无订单</h5>
            <a href="{% url 'home' %}" class="btn btn-primary mt-3">去下单</a>
        </div>
        {% endfor %}

        {% if orders.has_other_pages %}
        <nav aria-label="订单分页">
            <ul class="pagination justify-content-center">
                {% if orders.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ orders.previous_page_number }}">上一页</a>
                </li>
                {% endif %}

                {% for num in orders.paginator.page_range %}
                <li class="page-item {% if orders.number == num %}active{% endif %}">
                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                </li>
                {% endfor %}

                {% if orders.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ orders.next_page_number }}">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}
